<template>
  <div class="profile">
    <!-- <div class="header">帐号信息</div> -->
    <div class="d-flex fs16 mb-3 box">
      <div class="label d-center flex-end mr-2">用户名</div>
      <el-input v-model="username" :disabled="true"></el-input>
    </div>
    <div class="d-flex fs16 mb-3 box">
      <div class="label d-center flex-end mr-2">登录密码</div>
      <el-input class="mr-2" v-model="oldPwd" type="password" disabled></el-input>
      <el-button type="info" @click="showEditDialog">修改密码</el-button>
    </div>

    <!-- 修改密码的对话框 -->
    <el-dialog title="修改密码" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="原密码" prop="oldPass">
          <el-input type="password" v-model="ruleForm.oldPass" placeholder="请输入原密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPass">
          <el-input type="password" v-model="ruleForm.newPass" placeholder="请输入新密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="checkNewPass">
          <el-input type="password" v-model="ruleForm.checkNewPass" placeholder="请再次输入新密码" show-password></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editPwdForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import md5 from "md5";

export default {
  data() {
    var validateOldPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (value !== this.$store.state.password) {
          callback(new Error("密码错误"));
        } else {
          callback();
        }
      }
    };
    var validateNewPass = (rule, value, callback) => {
      // 6-16位, 数字, 字母, 字符至少包含两种, 同时不能包含中文和空格
      let reg = /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^[^\s\u4e00-\u9fa5]{6,16}$/;
      if (!reg.test(value)) {
        callback(new Error("密码长度需6-16位，且包含字母和字符"));
      } else if (value === this.$store.state.password) {
        callback(new Error("密码与原密码相同，请输入不同的密码"));
      } else {
        callback();
      }
    };
    var validateNewPass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.newPass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      username: this.$store.state.username,
      oldPwd: this.$store.state.password,
      editDialogVisible: false,
      ruleForm: {
        oldPass: "",
        newPass: "",
        checkNewPass: "",
      },
      rules: {
        oldPass: [{ validator: validateOldPass, trigger: "blur" }],
        newPass: [{ validator: validateNewPass, trigger: "blur" }],
        checkNewPass: [{ validator: validateNewPass2, trigger: "blur" }],
      },
    };
  },
  created() {
    this.$store.commit("changeBreadcrumb", this.$route);
  },
  methods: {
    showEditDialog() {
      this.editDialogVisible = true;
    },
    // 监听修改面慢对话框的关闭事件
    editDialogClosed() {
      this.$refs.ruleForm.resetFields();
    },
    editPwdForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) return false;
        let oldPwd = md5(this.ruleForm.oldPass);
        let newPwd = md5(this.ruleForm.newPass);
        const formData = new FormData();
        formData.append("oldPwd", oldPwd);
        formData.append("newPwd", newPwd);
        const { data: res } = await this.$http.post("editPwd", formData);
        // console.log(res);
        if (res.code != "0") return this.$message("密码修改失败");

        // 密码修改成功，更新存储的密码
        this.$store.commit("editPwd", { newPwd: this.ruleForm.newPass });
        this.$message.success("密码修改成功");
        this.editDialogVisible = false;
        // this.$router.go(0);
      });
    },
  },
};
</script>

<style lang="scss">
.profile {
  width: 500px;
  .header {
    font-size: 14px;
    color: #fff;
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 5px;
    background-color: #545c64;
  }
  .box {
    .label {
      width: 100px;
    }
    .el-form-item__label {
      padding: 0;
      margin-right: 20px !important;
    }
    .el-input {
      width: 150px;
    }
  }
}
</style>
